<template>
  <view>
    <view
      v-if="renderDom[0].type === 'order'"
      :class="'custom-message ' + (isMine ? 'my-custom' : '')"
    >
      <image class="custom-image" :src="renderDom[0].imageUrl"></image>
      <view class="custom-content">
        <view class="custom-content-title">{{ renderDom[0].title }}</view>
        <view class="custom-content-description">{{
          renderDom[0].description
        }}</view>
        <view class="custom-content-price">{{ renderDom[0].price }}</view>
      </view>
    </view>
    <view
      v-if="renderDom[0].type === 'consultion'"
      :class="'custom-message ' + (isMine ? 'my-custom' : '')"
    >
      <view class="custom-content">
        <view class="custom-content-title">{{ renderDom[0].title }}</view>
        <view
          v-for="(item, index) in renderDom[0].item"
          :key="index"
          class="custom-content-description"
          :id="item.key"
          >{{ item.key }}</view
        >
        <view class="custom-content-description">{{
          renderDom[0].description
        }}</view>
      </view>
    </view>
    <view
      v-if="renderDom[0].type === 'evaluation'"
      :class="'custom-message ' + (isMine ? 'my-custom' : '')"
    >
      <view class="custom-content">
        <view class="custom-content-title">{{ renderDom[0].title }}</view>
        <view class="custom-content-score">
          <image
            v-for="(item, index) in renderDom[0].score"
            :key="index"
            class="score-star"
            src="/static/static/images/star.png"
          ></image>
        </view>
        <view class="custom-content-description">{{
          renderDom[0].description
        }}</view>
      </view>
    </view>
    <view
      v-if="renderDom[0].type === 'group_create'"
      :class="'custom-message ' + (isMine ? 'my-custom' : '')"
    >
      <view class="custom-content-text">{{ renderDom[0].text }}</view>
    </view>
    <view
      v-if="
        renderDom[0].type === 'c2cCalling' ||
        renderDom[0].type === 'groupCalling'
      "
      :class="'custom-message ' + (isMine ? 'my-custom' : '')"
    >
      <view class="custom-content-text">{{ renderDom[0].text }}</view>
    </view>
    <view
      v-if="renderDom[0].type === 'notSupport'"
      class="message-body-span text-message"
    >
      <view class="message-body-span-text">{{ renderDom[0].text }}</view>
    </view>

    <!-- 电话 -->
    <view
      v-if="renderDom[0].type === 'exchange-phone'"
      class="message-body-span text-message"
    >
      <view class="message-body-span-text">
        <text v-if="renderDom[0].extension.ExchangePhone === 0">
          我想查看你的手机号，您是否同意？
        </text>
        <view
          v-if="renderDom[0].extension.ExchangePhone === 1"
          style="display: flex; justify-content: flex-start"
        >
          手机号是:
          <u-tooltip
            :text="renderDom[0].extension.UserPhoneNumber"
            overlay
            direction="bottom"
            :buttons="buttons"
            @click="(e) => dialing(e, renderDom[0].extension.UserPhoneNumber)"
          ></u-tooltip>
        </view>
      </view>

      <view
        class="bottombut"
        v-if="
          renderDom[0].extension.ExchangePhone == 0 &&
          appuserid == renderDom[0].extension.UserId
        "
      >
        <view class="but1" @click="clickagree(renderDom[0])">
          <text>同意</text>
        </view>
        <!-- 	<view class="but1" @click="clickrefuse">
					<text>拒绝</text>
				</view> -->
      </view>
    </view>

    <!-- 微信 -->
    <view
      v-if="renderDom[0].type === 'exchange-wechat'"
      class="message-body-span text-message"
    >
      <view class="message-body-span-text">
        <text v-if="renderDom[0].extension.ExchangeWechat === 0">
          我想查看你的微信号，您是否同意？
        </text>
        <view
          v-if="renderDom[0].extension.ExchangeWechat === 1"
          style="display: flex; justify-content: flex-start"
        >
          微信号是:
          <u-tooltip
            :text="renderDom[0].extension.UserWechat"
            overlay
            direction="bottom"
          ></u-tooltip>
        </view>
      </view>
      <view
        class="bottombut"
        v-if="
          renderDom[0].extension.ExchangeWechat == 0 &&
          appuserid == renderDom[0].extension.UserId
        "
      >
        <view class="but1" @click="clickagree(renderDom[0])">
          <text>同意</text>
        </view>
        <!-- 	<view class="but1" @click="clickrefuse">
					<text>拒绝</text>
				</view> -->
      </view>
    </view>

    <!-- 附件简历 -->
    <view
      v-if="renderDom[0].type === 'exchange-resume'"
      class="message-body-span text-message"
    >
      <view class="message-body-span-text">
        <text> 我想查看你的附件简历，您是否同意？ </text>
        <view
          style="padding: 10rpx; text-align: center; color: #ff0000"
          v-if="renderDom[0].extension.ExchangeResumeAttach === 1"
        >
          <text> 已同意 </text>
        </view>
      </view>
      <view
        class="bottombut"
        v-if="
          renderDom[0].extension.ExchangeResumeAttach === 0 &&
          appuserid == renderDom[0].extension.UserId
        "
      >
        <view class="but1" @click="clickagree(renderDom[0])">
          <text>同意</text>
        </view>
        <!-- <view class="but1" @click="clickrefuse">
					<text>拒绝</text>
				</view> -->
      </view>
    </view>

    <!-- 邀请面试 -->
    <view
      v-if="renderDom[0].type === 'job-interview'"
      class="message-body-span text-message"
    >
      <view class="message-body-span-text">
        <text>
          您好，我想邀请您于{{
            renderDom[0].extension.InterviewTime
          }}进行岗位面试，您是否同意?
        </text>
        <view style="padding: 10rpx; text-align: center; color: #ff0000">
          <text v-show="renderDom[0].extension.InterviewState === 1">
            已接受面试邀请
          </text>
          <text v-show="renderDom[0].extension.InterviewState === 5">
            已拒绝邀请面试
          </text>
        </view>
      </view>

      <view
        v-if="
          !timeEstimate(renderDom[0].extension.InterviewTime) &&
          renderDom[0].extension.InterviewState === 0
        "
        style="padding: 10rpx; text-align: center; color: #ff0000"
      >
        <text> 面试邀请已过期 </text>
      </view>
      <view
        class="bottombut"
        v-if="
          renderDom[0].extension.InterviewState === 0 &&
          appuserid == renderDom[0].extension.UserId
        "
      >
        <view
          class="but1"
          @click="clickagree(renderDom[0])"
          v-if="timeEstimate(renderDom[0].extension.InterviewTime)"
        >
          <text>同意</text>
        </view>
        <view
          class="but1"
          @click="clickrefuse(renderDom[0])"
          v-if="timeEstimate(renderDom[0].extension.InterviewTime)"
        >
          <text>拒绝</text>
        </view>
      </view>
    </view>
    <!-- 咨询面试邀请结果 -->
    <view
      v-if="renderDom[0].type === 'job-interview-result'"
      class="message-body-span text-message"
    >
      <view class="message-body-span-text">
          您好，我想问下我的面试情况结果如何，能否告知一下吗？
        <view style="padding: 10rpx; text-align: center; color: #ff0000">
          <text v-show="renderDom[0].extension.HasEmploy == 1"> 面试通过 </text>
        </view>
      </view>

      <view
        class="bottombut"
        v-if="
          renderDom[0].extension.HasEmploy === 0 &&
          appuserid == renderDom[0].extension.JobUserId
        "
      >
        <view class="but1" @click="clickagree(renderDom[0])">
          <text>通过</text>
        </view>
      </view>
    </view>

    <!-- 录用通知 -->
    <view
      v-if="renderDom[0].type === 'job-employ'"
      class="message-body-span text-message"
    >
      <view class="message-body-span-text">
        {{ renderDom[0].extension.Desc }}
      </view>
      <view
        class="bottombut"
        v-if="
          renderDom[0].extension.HasEmploy === 0 &&
          appuserid == renderDom[0].extension.UserId
        "
      >
        <view class="but1" @click="clickagree(renderDom[0])">
          <text>同意</text>
        </view>
      </view>
    </view>

    <!-- 消息描述 -->
    <view v-if="renderDom[0].type === 'system-text-tips'" class="system">
      {{ renderDom[0].title }}
    </view>
  </view>
</template>

<script>
import { formateTime } from "../../../base/common.js";
const app = getApp();
export default {
  data() {
    return {
      appuserid: "",
      date: "",
      buttons: ["拨号"],
    };
  },
  components: {},
  props: {
    message: {
      type: Object,
      default: () => {},
    },
    isMine: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    message: {
      handler: function (newVal) {
        this.setData({
          message: newVal,
          renderDom: this.parseCustom(newVal),
        });
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.appuserid = app.globalData.user.UserId;
  },
  methods: {
    //拨号
    dialing(key, val) {
      if (key == 1) {
        uni.makePhoneCall({
          phoneNumber: val, //仅为示例
        });
      }
    },
    timeEstimate(item) {
      let tag = new Date(item) > new Date() ? true : false;
      return tag;
    },
    clickagree(item) {
      let message = JSON.parse(JSON.stringify(this.message));
      delete message.payload.extension.type;
      delete message.payload.extension.title;
      message.payload.extension = JSON.stringify(item.extension);
      this.$bus.$emit("clickagree", message);
    },
    clickrefuse(item) {
      let message = JSON.parse(JSON.stringify(this.message));
      delete message.payload.extension.type;
      delete message.payload.extension.title;
      message.payload.extension = JSON.stringify(item.extension);
      this.$bus.$emit("clickrefuse", message);
    },

    // 解析音视频通话消息
    extractCallingInfoFromMessage(message) {
      const callingmessage = JSON.parse(message.payload.data);
      if (callingmessage.businessID !== 1) {
        return "";
      }
      const objectData = JSON.parse(callingmessage.data);
      switch (callingmessage.actionType) {
        case 1: {
          if (objectData.call_end >= 0 && !callingmessage.groupID) {
            return `通话时长：${formateTime(objectData.call_end)}`;
          }
          if (callingmessage.groupID) {
            return "结束群聊";
          }
          if (objectData.data && objectData.data.cmd === "switchToAudio") {
            return "切换语音通话";
          }
          if (objectData.data && objectData.data.cmd === "switchToVideo") {
            return "切换视频通话";
          }
          return "发起通话";
        }
        case 2:
          return "取消通话";
        case 3:
          if (objectData.data && objectData.data.cmd === "switchToAudio") {
            return "切换语音通话";
          }
          if (objectData.data && objectData.data.cmd === "switchToVideo") {
            return "切换视频通话";
          }
          return "已接听";
        case 4:
          return "拒绝通话";
        case 5:
          if (objectData.data && objectData.data.cmd === "switchToAudio") {
            return "切换语音通话";
          }
          if (objectData.data && objectData.data.cmd === "switchToVideo") {
            return "切换视频通话";
          }
          return "无应答";
        default:
          return "";
      }
    },
    parseCustom(message) {
      if (message.payload.data === "exchange-phone") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "exchange-phone",
            title: message.payload.description,
            extension: extension,
          },
        ];
        return renderDom;
      }

      // 微信
      if (message.payload.data === "exchange-wechat") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "exchange-wechat",
            title: message.payload.description,
            extension: extension,
          },
        ];
        return renderDom;
      }
      // 附件简历
      if (message.payload.data === "exchange-resume") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "exchange-resume",
            title: message.payload.description,
            extension: extension,
          },
        ];
        return renderDom;
      }

      // 邀请面试
      if (message.payload.data === "job-interview") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "job-interview",
            title: message.payload.description,
            extension: extension,
          },
        ];
        return renderDom;
      }

      // 录用通知
      if (message.payload.data === "job-employ") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "job-employ",
            title: message.payload.description,
            extension: extension,
          },
        ];
        return renderDom;
      }

      // 消息描述
      if (message.payload.data === "system-text-tips") {
        // const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "system-text-tips",
            title: message.payload.description,
            // extension: extension
          },
        ];
        return renderDom;
      }
      // 询问面试结果
      if (message.payload.data === "job-interview-result") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "job-interview-result",
            title: message.payload.description,
            extension: extension,
          },
        ];
        return renderDom;
      }
      // 约定自定义消息的 data 字段作为区分，不解析的不进行展示
      if (message.payload.data === "order") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "order",
            name: "custom",
            title: extension.title || "",
            imageUrl: extension.imageUrl || "",
            price: extension.price || 0,
            description: message.payload.description,
          },
        ];
        return renderDom;
      } // 客服咨询

      if (message.payload.data === "consultion") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "consultion",
            title: extension.title || "",
            item: extension.item || 0,
            description: extension.description,
          },
        ];
        return renderDom;
      } // 服务评价

      if (message.payload.data === "evaluation") {
        const extension = JSON.parse(message.payload.extension);
        const renderDom = [
          {
            type: "evaluation",
            title: message.payload.description,
            score: extension.score,
            description: extension.comment,
          },
        ];
        return renderDom;
      } // 群消息解析
      // 群消息解析
      if (message.payload.data === "group_create") {
        const renderDom = [
          {
            type: "group_create",
            text: message.payload.extension,
          },
        ];
        return renderDom;
      }
      // // 音视频通话消息解析
      const callingmessage = JSON.parse(message.payload.data);

      if (callingmessage.businessID === 1) {
        if (message.conversationType === "GROUP") {
          if (message.payload.data.actionType === 5) {
            message.nick = message.payload.data.inviteeList
              ? message.payload.data.inviteeList.join(",")
              : message.from;
          }
          const _text = this.extractCallingInfoFromMessage(message);
          const groupText = `${_text}`;
          const renderDom = [
            {
              type: "groupCalling",
              text: groupText,
              userIDList: [],
            },
          ];
          return renderDom;
        }
        if (message.conversationType === "C2C") {
          const c2cText = this.extractCallingInfoFromMessage(message);
          const renderDom = [
            {
              type: "c2cCalling",
              text: c2cText,
            },
          ];
          return renderDom;
        }
      }

      if (message.payload.data === "group_create") {
        const renderDom = [
          {
            type: "group_create",
            text: message.payload.extension,
          },
        ];
        return renderDom;
      }

      return [
        {
          type: "notSupport",
          text: "[自定义消息]",
        },
      ];
    },
  },
};
</script>
<style>
@import "./index.css";

.zhidingyi {
}

.bottombut {
  display: flex;
}

.but1 {
  margin: 10rpx 30rpx 0rpx;
  padding: 4rpx 50rpx;
  background-color: #e6f5f6;
  color: #808080;
  font-size: 26rpx;
  border-radius: 8rpx;
}
</style>
<style lang="scss" scoped>
.system {
  width: 100vw;
  color: #a5a5a5;
  font-size: 26rpx;
  text-align: center;
  position: relative;
  left: 0;
  right: 0;
}
</style>